<template>
			<div>
				<el-row>
				  <el-col :span="2">
					  类别: 
				  </el-col>
				  <el-col :span="4">
					  <el-select v-model="value" placeholder="请选择">
					      <el-option
					        v-for="item in options"
					        :key="item.shoptypeid"
					        :label="item.shoptypename"
					        :value="item.shoptypename">
					      </el-option>
					    </el-select>
				  </el-col>
				</el-row>
			<div style="width:900px;height:500px" ref="chart"></div>
			</div>
</template>

<script>
	/* value	选项的值	string/number/object	—	—
	label	选项的标签，若不设置则默认与 value 相同 */
var _this;
	const echarts = require('echarts');
	export default{
		created() {
			_this=this;
			_this.showAll();
		},
				data(){
				return {
					options: [],
					value:''
				}
				},
			methods: {
				initCharts(){
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(this.$refs.chart);
				// 绘制图表
				myChart.setOption({
					title: { text: '在Vue中使用echarts' },
					tooltip: {},
					xAxis: {
					data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
					},
					yAxis: {},
					series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
					}]
					});
				},
				showAll(){
					//进入后台查--->axios
					_this.$axios.post(
					   "/shoptype/all",
					   {}
					)
					.then(function(param){
						console.log(param)
						_this.options=param.data
					})
					.catch(function(err){
						console.log(err)
					})
				},
				
			},
			//一加载页面就调用
			mounted () {
			this.initCharts();
			}
			}
</script>

<style>
</style>
